<template>
  <div>
    <el-table :data="dataList" border>
      <el-table-column prop="commentId" label="编号" align="center"/>
      <el-table-column prop="name" label="评论人" align="center"/>
      <el-table-column prop="content" label="内容" show-overflow-tooltip align="center"/>
      <el-table-column prop="article.title" label="评论文章" show-overflow-tooltip align="center"/>
      <el-table-column prop="commentTime" label="评论时间" align="center"/>
      <el-table-column prop="status" label="状态" align="center" v-if="!isDialog">
        <template slot-scope="scope">
          <el-button size="small" title="点击切换状态"
                     @click="$emit('changeStatus',{commentId:scope.row.commentId,status:2})"
                     v-if="scope.row.status === 1" type="success">可用
          </el-button>
          <el-button size="small" title="点击切换状态"
                     @click="$emit('changeStatus',{commentId:scope.row.commentId,status:1})" v-else
                     type="danger">禁用
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="commentStatus" label="文章状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.commentStatus === 1" type="warning">待审核</el-tag>
          <el-tag v-else-if="scope.row.commentStatus === 2" type="success">已通过</el-tag>
          <el-tag v-else type="danger">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="!isDialog" label="操作" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="$emit('examComment',scope.row.commentId)">审核</el-button>
          <el-button size="small" type="warning" @click="$emit('deleteComment',scope.row.commentId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination hide-on-single-page :current-page="pageInfo.page" :page-size="pageInfo.limit"
                   :total="pageInfo.total" :page-sizes="[5,10,20,30,50,100]" layout="total,sizes,prev,pager,next,jumper"
                   @current-change="currentChange" @size-change="sizeChange"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommentTable',
  props: ['dataList', 'pageInfo', 'isDialog'],
  data () {
    return {}
  },
  methods: {
    currentChange (val) {
      this.$emit('currentChange', val)
    },
    sizeChange (val) {
      this.$emit('sizeChange', val)
    }
  }
}
</script>

<style scoped>

</style>
